<template>
  <div class="page-index">
    <div class="page-search">
      <el-form inline>
        <el-form-item label="党员姓名">
          <el-input v-model="queryParams.partyMemberName" size="mini" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="转接类型">
          <el-select clearable v-model="queryParams.transferType" size="mini" placeholder="请选择">
            <el-option
              v-for="(item,index) in typeList"
              :key="index"
              :label="item"
              :value="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="search">搜索</el-button>
          <el-button size="mini" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form inline>
        <el-form-item>
          <el-button size="mini" type="primary" @click="openAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-body">
      <div class="table-box">
        <el-table
          :data="tableData"
          height="100%"
        >
          <el-table-column type="index" label="序号" align="center" width="50" />
          <el-table-column prop="partyMemberName" label="党员姓名" align="center" width="150" />
          <el-table-column prop="transferredOutPartyOrgName" label="原党组织名称" align="center" min-width="150" />
          <el-table-column prop="transferType" label="转接类型" align="center" width="160">
            <template slot-scope="scope">
              {{ typeList[scope.row.transferType] }}
            </template>
          </el-table-column>
          <el-table-column prop="transferredToPartyOrgName" label="转入/转出党组织名称" align="center" min-width="150" />
          <el-table-column prop="reasonForTransfer" label="转入/转出事由" align="center" min-width="150" />
          <el-table-column prop="transferTime" label="转接时间" align="center" width="150" />
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="openDetail(scope.row)"
              >详情</el-button>
              <el-button
                type="text"
                size="mini"
                @click="openEdit(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                size="mini"
                style="color:#F56C6C;"
                @click="openDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getData"
      />
    </div>
    <addOrEdit ref="addOrEdit" @getData="getData" />
    <detailPage ref="detailPage" />
  </div>
</template>
<script>
import addOrEdit from './components/addOrEdit'
import detailPage from './components/detail'
import { queryByCondition, queryById, deleteById } from '@/api/partyMemberManagement/transferManagement'
export default {
  components: { addOrEdit, detailPage },
  data () {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        partyMemberName: '',
        transferType: ''
      },
      total: 0,
      tableData: [],
      typeList: ['转入', '转出至系统内其他党组织', '转出至系统外党组织']
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      queryByCondition(this.queryParams).then((res) => {
        this.tableData = res?.data?.records || []
        this.total = res?.data?.total || 0
      })
    },
    search () {
      this.queryParams.pageNo = 1
      this.getData()
    },
    reset () {
      this.queryParams.partyMemberName = ''
      this.queryParams.transferType = ''
      this.search()
    },
    openAdd () {
      this.$refs.addOrEdit.open({ transferType: 0 })
    },
    openEdit (row) {
      queryById({ id: row.id }).then((res) => {
        this.$refs.addOrEdit.open(res?.data || row)
      })
    },
    openDelete (row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById({ id: row.id }).then((res) => {
          this.$message.success('删除成功')
          this.getData()
        })
      })
    },
    openDetail (row) {
      queryById({ id: row.id }).then((res) => {
        this.$refs.detailPage.open(res?.data || row)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.page-index {
  padding-top: 24px;
  .page-search {
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    justify-content: space-between;
  }
  .page-body{
    .table-box {
      height: calc(100vh - 230px);
    }
  }
}
</style>
